<template>
	<view class="">
		<view class="w-navbar animated fadeIn"
			:style="{'height':mixinBarHeight+'px','backgroundColor':scrollTop?scrollColor:backgroundColor}">
			<view class="w-status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
			<view class="w-navbar-inner" :style="{
				'marginRight' :title?0:navbarInnerStyle.marginRight,
				'height':mixinBarHeight - statusBarHeight + 'px'
			}">
				<view v-if="isBack" @click="goBack()" class="iconfont icon-arrow-left-bold w-navbar-back"
					:style="{'color':titleColor?titleColor:'white'}"></view>
				<view v-if="title" class="w-navbar-title" :style="{'color':titleColor?titleColor:'white'}">
					{{title}}
				</view>
				<!-- <image v-else style="height: 62%;width: 82%;margin: 8rpx 0 0 0;"
					src=""
					mode="widthFix"></image> -->
				<slot name="w-navbar-title"></slot>
			</view>
		</view>
		<view v-if="!immersive" class="" :style="{ width: '100%', height: mixinBarHeight + 'px' }"></view>
	</view>

</template>

<script>
	let systemInfo = uni.getSystemInfoSync();
	let menuButtonInfo = {};
	// 如果是小程序，获取右上角胶囊的尺寸信息，避免导航栏右侧内容与胶囊重叠(支付宝小程序非本API，尚未兼容)
	// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
	menuButtonInfo = uni.getMenuButtonBoundingClientRect();
	// #endif
	export default {
		data() {
			return {
				statusBarHeight: systemInfo.statusBarHeight,
				menuButtonInfo: menuButtonInfo,
				//状态栏+导航高度
				// #ifndef MP-WEIXIN
				mixinBarHeight: 44 + systemInfo.statusBarHeight,
				// #endif
				// #ifdef MP-WEIXIN
				mixinBarHeight: menuButtonInfo.bottom + menuButtonInfo.top - systemInfo.statusBarHeight,
				// #endif
			}
		},
		props: {
			scrollTop: Number, //与顶部的距离
			scrollColor: String, //页面滚动时改变的背景颜色

			backgroundColor: String, //整体背景颜色
			isBack: {
				default: true,
			}, //是否允许返回
			title: String, //标题文字
			titleColor: String, //标题文字颜色
			// 是否沉浸式，允许fixed定位后导航栏塌陷，仅fixed定位下生效
			immersive: {
				default: false
			},
		},
		computed: {
			// 导航栏内部盒子的样式
			navbarInnerStyle() {
				let style = {};
				// // 如果是各家小程序，导航栏内部的宽度需要减少右边胶囊的宽度
				// #ifdef MP
				let rightButtonWidth = systemInfo.windowWidth - menuButtonInfo.left;
				style.marginRight = rightButtonWidth + 'px';
				// #endif
				// #ifndef MP
				// style.marginRight = 25 + '%';
				style.marginRight = 0;
				// #endif
				return style;
			},
		},
		methods: {
			goBack() {
				let pages = getCurrentPages()
				if (pages.length > 1) {
					uni.navigateBack()
				} else {
					uni.reLaunch({
						url: '/pages/index/index'
					})
				}
			},
		}
	}
</script>

<style scoped>
	.w-navbar {
		transition: all 0.5s;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		z-index: 991;
		overflow: hidden;
	}

	.w-status-bar {
		width: 100%;
	}

	.w-navbar-inner {
		position: relative;
		height: 100%;
		display: flex;
		position: relative;
		align-items: center;
	}

	.w-navbar-back {
		margin: 0 20rpx;
	}

	.w-navbar-title {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 100vw;
		text-align: center;
		font-size: 30rpx;
	}

	.iconfont {
		z-index: 99;
		font-size: 40rpx;
	}
</style>